import { defineComponent, ref } from 'vue'
import { NButton, NDataTable } from 'naive-ui'
import { useColumns } from './use-columns'
import { useTableDetail } from './use-table-detail'
import styles from './index.module.scss'
import DdlModal from '@/views/data-manage/dialog/data-catalog/ddl-modal'

const TableDetailTab = defineComponent({
  name: 'TableDetailTab',
  props: {
    datasourceId: {
      type: Number,
      required: true
    },
    dbName: {
      type: String,
      required: true
    },
    tableName: {
      type: String,
      required: true
    }
  },
  setup() {
    const ddlModalShowRef = ref(false)
    const { state, getTableDetail } = useTableDetail()
    const { fieldColumnsRef, indexColumnsRef } = useColumns()

    return {
      state,
      getTableDetail,
      ddlModalShowRef,
      fieldColumnsRef,
      indexColumnsRef
    }
  },
  created() {
    this.getTableDetail(this.datasourceId, this.dbName, this.tableName)
  },
  methods: {
    handleDdlModalShowChange() {
      this.ddlModalShowRef = !this.ddlModalShowRef
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div v-show={this.state.tableDetail}>
          <div class={styles.baseInfo}>
            <table>
              <tbody>
                <tr>
                  <td>{window.$t('dataManage.tableName')}</td>
                  <td>{this.state.tableDetail?.tableName}</td>
                  <td>
                    <NButton
                      type='info'
                      size='tiny'
                      onClick={() => {
                        this.ddlModalShowRef = true
                      }}
                    >
                      {window.$t('dataManage.createTableDDL')}
                    </NButton>
                    <DdlModal
                      showModal={this.ddlModalShowRef}
                      onModalShowChange={this.handleDdlModalShowChange}
                      ddl={this.state.tableDetail?.ddl}
                    ></DdlModal>
                  </td>
                </tr>
                <tr>
                  <td>{window.$t('dataManage.owner')}</td>
                  <td>{this.state.tableDetail?.owner}</td>
                </tr>
                <tr>
                  <td>{window.$t('dataManage.tableComment')}</td>
                  <td>{this.state.tableDetail?.tableComment}</td>
                </tr>
                <tr>
                  <td>{window.$t('dataManage.remark')}</td>
                  <td>{this.state.tableDetail?.remark}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class={styles.fieldInfo}>
            <h3>{window.$t('dataManage.tableConstruction')}</h3>
            <NDataTable
              row-class-name='items'
              columns={this.fieldColumnsRef.fieldColumns}
              size='small'
              single-line={false}
              data={this.state.tableDetail?.columns}
              loading={this.state.loading}
              scrollX={this.fieldColumnsRef.tableWidth}
            />
          </div>
          <div class={styles.indexInfo}>
            <h3>{window.$t('dataManage.tableIndex')}</h3>
            <NDataTable
              row-class-name='items'
              columns={this.indexColumnsRef.indexColumns}
              size='small'
              single-line={false}
              data={this.state.tableDetail?.indexs}
              loading={this.state.loading}
              scrollX={this.indexColumnsRef.tableWidth}
            />
          </div>
        </div>
        <div v-show={!this.state.tableDetail}>您没有权限查看当前表详情</div>
      </div>
    )
  }
})

export default TableDetailTab
